<template>
    <div class="detail">
        <!-- 顶部导航 -->
        <van-nav-bar title="备忘录详情" />

        <!-- 详情 card -->
        <div class="item">
            <van-row type="flex" justify="space-between" align="center">
                <van-col span="20">任务名称</van-col>
            </van-row>

            <van-row type="flex" justify="space-between" align="center">
                <van-col span="14">支付本金 10 元</van-col>

                <van-col span="10">
                    <van-field label="未返" label-width="30px">
                        <template #input>
                            <van-switch v-model="is_return_benjin" size="20" />
                        </template>
                    </van-field>
                </van-col>
            </van-row>

            <van-row type="flex" justify="space-between" align="center">
                <van-col span="14">佣金受益 2 元</van-col>

                <van-col span="10">
                    <van-field label="未返" label-width="30px">
                        <template #input>
                            <van-switch v-model="is_return_yongjin" size="20" />
                        </template>
                    </van-field> </van-col
            ></van-row>

            <div class="van-hairline--top">
                <van-field v-model="mark" label="备注：" label-width="45px" />
            </div>
        </div>

        <!-- 提交按钮 -->
        <van-button type="primary" block plain hairline @click="edit"
            >保存</van-button
        >
        <van-button type="danger" block plain hairline @click="destroy"
            >删除</van-button
        >
    </div>
</template>

<script>
import { Notify, Dialog } from 'vant';
export default {
    mounted() {
        this.getDetail();
    },
    data() {
        return {
            is_return_benjin: false,
            is_return_yongjin: false,
            mark: '',
            old: {},
        };
    },
    methods: {
        async getDetail() {
            // 从后台拿到了详情数据
            let res = await this.$http.get(`/memos/${this.$route.params.id}`);
            this.old = res.data;
            // 因为后端传过来的是 0 或 1，而页面展示需要 true 或 false，所以转换一下
            // 0 对应 false，1 对应 true
            this.is_return_benjin =
                res.data.is_return_benjin === 0 ? false : true;
            this.is_return_yongjin =
                res.data.is_return_yongjin === 0 ? false : true;
            this.mark = res.data.mark;
        },
        async edit() {
            const is_return_benjin = this.is_return_benjin ? 1 : 0;
            const is_return_yongjin = this.is_return_yongjin ? 1 : 0;

            let params = {};

            // 判断 mark 值是否修改了
            if (this.old.mark !== this.mark) {
                params.mark = this.mark;
            }

            // 判断 is_return_benjin 是否修改了
            if (this.old.is_return_benjin !== is_return_benjin) {
                params.is_return_benjin = is_return_benjin;
            }

            // 判断 is_return_yongjin 是否修改了
            if (this.old.is_return_yongjin !== is_return_yongjin) {
                params.is_return_yongjin = is_return_yongjin;
            }

            const res = await this.$http.put(`/memos/${this.old.id}`, params);

            if (res.code !== 200) {
                Notify({ type: 'danger', message: res.message });
                return;
            }

            this.$router.push('/list');
        },
        destroy() {
            Dialog.confirm({
                title: '危险操作',
                message: '你确定删除该备忘录吗？',
            })
                .then(async () => {
                    const res = await this.$http.delete(
                        `/memos/${this.old.id}`,
                    );
                    if (res.code !== 204) {
                        Notify({ type: 'danger', message: res.message });
                        return;
                    }
                    this.$router.push('/list');
                })
                .catch(() => {
                    // on cancel
                    console.log('取消了危险操作');
                });
        },
    },
};
</script>

<style lang="less" scoped>
.detail {
    height: 100vh;
    background: #eee;

    .item {
        padding: 5px;
        margin: 5px;
        border-radius: 15px;
        background: #fff;
    }

    .van-row {
        height: 45px;
        margin: 15px 0;
    }

    .van-button {
        margin-top: 15px;
        margin-left: 0px;
    }
}
</style>
